<?
    Jaguar::view()->setVar('BODY','Смена статуса произойдет без перезагрузки страницы!<br />
    Чтобы добавить в пример использование"ajax-loader", - в AJAX-обработчик поставлена пауза <strong>sleep(1);</strong>');

    //создаем обычную форму
    $form = new jQuickForm('simple');
    $status = $form->insertInputText('status')->setAttribute('maxlength',255)
        ->addClass('statusInput')->setPlaceholder('О чём Вы думаете?')
        ->setId('status');

    //смысл в пустом статусе?
    $status->addRuleRequired("Вы сейчас правда ни о чем не думаете? Так и напишите!");

    $form->insertInputSubmit('Поделиться','button_status_save')
        ->setId('hook_FormButton_button_status_save');

    //добавляем стили, взятые на одноклассниках
    jQuickForm::css()->addCss('/cms/css/odnoklassniki.css');

    //получаем рендерер
    $renderer = HTML_QuickForm2_Renderer::factory('default');

    //передаем ему кастомный вид элемента input text
    $renderer->setTemplateForClass('html_quickform2_element',
    '<div class="fl">{element}<br />
        <span class="jqf_error" id="jqferr-{id}"><qf:error>{error}</qf:error></span>
    </div>');

    //передаем ему кастомный вид элемента input submit
    $renderer->setTemplateForClass('html_quickform2_element_inputsubmit',
    '<div class="">{element}</div>');

    //передаем ему кастомный вид формы
    $renderer->setTemplateForClass('html_quickform2','
<div class="statusBlock">
    <div class="statusArrow">
        <b style="margin-left: 0px;"></b>
        <b style="margin-left: 1px;"></b>
        <b style="margin-left: 2px;"></b>
        <b style="margin-left: 3px;"></b>
        <b style="margin-left: 4px;"></b>
        <b style="margin-left: 5px;"></b>
    </div>
    <div class="statusContainer breakWord">
        <div class="statusDecorator_panel_form_empty" id="statusDecorator_panel_form">
            <div class="hook" id="hook_Form_MiddleColumnTopCard_StatusForm">
                <form{attributes}>
                    {hidden}
                    {content}
                    <div class="clear"></div>
                </form>
            </div>
        </div>
        <div>
            <div class="statusCurrent">Ура! Я заработал свой первый миллион евро!!
                &nbsp;&#8203;&nbsp;&#8203;
                <span class="statusTime">Сегодня в '.date('H:i').'</span>
            </div>
        </div>
    </div>
</div>
<div id="status_info"></div>
<div id="status_history">
    <h3>История ваших статусов</h3>
</div>
    ');

    //навешаем на "onsubmit" формы
    $form->addOnSubmit('
            jQuery("#status_info").toggleClass("ajax_loader");
            jQuery.post(
                "/cms/ajax/odnoklassniki.php",
                { status: jQuery("#status").val()},
                function(data){
                    jQuery("#status_info").toggleClass("ajax_loader");
                    jQuery("#jqferr-status").html("");
                    jQuery("#status").val("");
                    jQuery("#status").blur();
                    jQuery("#status_history h3").after(data.history);
                    jQuery(".statusCurrent").html(data.current+"&nbsp;&#8203;&nbsp;&#8203;"
                    +"<span class=\"statusTime\">Сегодня в "+data.time+"</span>");
                },
                "json"
            );
    ');

    Jaguar::view()->setVar('PHP_CODE','<h2>Скрипт AJAX-обработчика,
    который записывает новые статусы и обновляет историю статусов</h2>');
    Jaguar::view()->setVar('PHP_CODE',
        trim(highlight_file($_SERVER['DOCUMENT_ROOT']
        .'/cms/ajax/odnoklassniki.php',true)));



?>
